<template>
  <div id="mapContainer">
    <PIERealTime class="pie-realtime" :stationList="stationList" :selectDataList="selectDataList"
      :selectValue="selectValue" :energyValue="energyValue" @searchClick="searchClick" @changeValue="changeValue"
      @selectActive="selectActive">
    </PIERealTime>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  onMounted,
  toRefs,
  getCurrentInstance,
  ref,
} from "vue";
import baseMap from '@/plugins/lib/baseMaps'
onMounted(() => { initMap() })
let baseMapObj: any = null
let map: any = null
// 初始化地图
const initMap = () => {
  baseMapObj = new baseMap({
    container: "mapContainer",
    zoom: 3,
    // center: [123.31054687499999, 36.38591277287651],
  });

  map = baseMapObj.map;
  map.on("load", function () {
    // addAreaString();
    // addPointString();
  });
}
// 台站类型数据
let stationList = [
  { name: '台站1', value: 1 },
  { name: '台站2', value: 2 },
  { name: '台站3', value: 3 },
  { name: '台站4', value: 4 },
  { name: '台站5', value: 5 },
  { name: '台站6', value: 6 },
  { name: '台站6', value: 6 },
  { name: '台站6', value: 6 },
];

let selectDataList = [
  { label: '重力', value: 1 },
  { label: '重力', value: 2 },
  { label: '重力', value: 3 },
  { label: '重力', value: 4 },
]
let selectValue = ref(1);
let energyValue = ref(1);
// 查询事件
const searchClick = () => {

}
// 台站点击事件
const selectActive = (item: any) => {
  // console.log(item);
}
// 单选按钮
const changeValue = (value: any) => {
  // console.log(value);
}
</script>

<style lang="less" scoped>
#mapContainer {
  width: 100%;
  height: 100%;
  position: relative;

  .pie-realtime {
    position: absolute;
    top: @global-margin;
    left: @global-margin;
    width: 400px;
  }
}
</style>